/**
 * <p>
 * 表格容器类
 * </p>
 * 
 * @class 表格容器类
 * @param {number} rowC 表格行数
 * @param {number} colC 表格列数
 */
zxt.ui.TablePanel = function(rowC, colC){
	zxt.ui.Widget.call(this);	
	this.rowCount = rowC;
	this.colCount = colC;
	
	this._$PanelDom = null;
	this.cells = [];
};

zxt.defineClazz(zxt.ui.TablePanel, zxt.ui.Widget);

/**
 * <p>
 * 返回控件类型
 * </p>
 * 
 * @function
 * @returns {string} "panel"
 */
zxt.ui.TablePanel.prototype.getType = function(){
  return "panel";
};


/**
 * <p>
 * 渲染该表格容器的DOM节点
 * </p>
 * 
 * @function
 * @return {DOM} 渲染成的DOM节点
 */
zxt.ui.TablePanel.prototype.renderSelf = function(){
	var body = $("<tbody/>");
	var table = $("<table border=0 cellspacing=0 cellpadding=0 style='position: relative;table-layout:none'/>").append(body);

	var origin = body.html();
	var h = new Array;
	h.push(origin);
	for (var i=0;i<this.rowCount;i++){
		h.push("<tr>");
		h.push(this._renderCells());
		h.push("</tr>");
	}
	body.html(h.join(''));
	var rows = $("tr", body).get();	
	for (var i=0;i<this.rowCount;i++){
		var tds = $("td", rows[i]);
		this.cells.push(tds);
	}
	this._$PanelDom = table.get(0);
	return this._$PanelDom;
};

zxt.ui.TablePanel.prototype.renderedDOM  = function(){
	return this._$PanelDom;
};	

/**
 * <p>
 * 渲染该表格容器的单元格的DOM节点
 * </p>
 * 
 * @function
 * @return {DOM} 渲染成的DOM节点
 */
zxt.ui.TablePanel.prototype._renderCells = function(){
	var html = [];
	for(var j=0;j<this.colCount;j++){
		html.push("<td nowrap style='overflow:hidden' />");
	}
	return html.join('');
};


/**
 * <p>
 * 获得单元格对象
 * </p>
 * 
 * @function
 * @param {number} r 单元格所在行数
 * @param {number} c 单元格所在列数
 * @return {jqueryObject} 单元格对象
 */
zxt.ui.TablePanel.prototype.getCell = function(r,c){
	return this.cells[r][c];
};



/**
 * <p>
 * 表格列类
 * </p>
 * 
 * @class 表格列类
 *
 */
zxt.ui.Columns = function(){
	zxt.ui.Widget.call(this);
	
	this._$td = $("<td/>").width("100%");
	this._$tr = $("<tr/>").append(this._$td);	
	this._$body = $("<tbody/>").append(this._$tr);	
	this._$table = $("<table border=0 cellspacing=0 cellpadding=0 style='position: relative;'/>").append(this._$body);
};



/**
 * <p>
 * 根据传入的DOM元素, 解析传入的相关属性, 创建相应的区域
 * </p>
 * 
 * @function
 * @static
 * @param {DOM} elem 传入的DOM元素
 * @param {string} ［zxt.end］ 标识是否为最后一列，默认为“false”
 * @return {zxt.ui.Columns} 创建的区域对象
 */
zxt.ui.Columns.parse = function(elem){
	var j = $(elem);
		
	var _instance = new zxt.ui.Columns();
	j.children().each( function( idx, dom )
		{
			var _end = $(dom).attr("zxt.end");
			if ( _end == "true" )
				_instance.addElement(dom, true);
			else
				_instance.addElement(dom, false);
		}
	);	
	
	return _instance;
};


zxt.defineClazz(zxt.ui.Columns, zxt.ui.Widget);


/**
 * <p>
 * 返回控件类型
 * </p>
 * 
 * @function
 * @returns {string} "zxt.ui.Columns"
 */
zxt.ui.Columns.prototype.getType = function(){
  return "zxt.ui.Columns";
};



/**
 * <p>
 * 渲染该区域的DOM节点
 * </p>
 * 
 * @function
 * @return {DOM} 渲染成的DOM节点
 */
zxt.ui.Columns.prototype.renderSelf = function(){
  return this._$table.get(0);
};


/**
 * <p>
 * 在原有列前面插入传入的DOM元素
 * </p>
 * 
 * @function
 * @static
 * @param {DOM} elem 传入的DOM元素
 */
zxt.ui.Columns.prototype.frontAppend = function (elem){
	var td = $("<td nowrap />").append(elem);
	this._$td.before(td);
};


/**
 * <p>
 * 在原有列后面插入传入的DOM元素
 * </p>
 * 
 * @function
 * @static
 * @param {DOM} elem 传入的DOM元素
 */
zxt.ui.Columns.prototype.endAppend = function (elem){
	var td = $("<td nowrap />").append(elem);
	this._$tr.append(td);
};	


/**
 * <p>
 * 插入传入的DOM元素
 * </p>
 * 
 * @function
 * @static
 * @param {DOM} elem 传入的DOM元素
 * @param {Boolean} end 是否在原有列后面插入
 */
zxt.ui.Columns.prototype.addElement = function (elem, end){
	if ( end ){
		this.endAppend(elem);
	} else {
		this.frontAppend(elem);
	}	
};	


/**
 * <p>
 * 表格行类
 * </p>
 * 
 * @class 表格行类
 *
 */
zxt.ui.Rows = function(){
	zxt.ui.Widget.call(this);
	
	this._$td = $("<td>&nbsp;</td>").height("100%");
	this._$tr = $("<tr/>").height("100%").append(this._$td);	
	this._$body = $("<tbody/>").append(this._$tr);	
	this._$table = $("<table border=0 cellspacing=0 cellpadding=0 height='100%' style='position: relative;'/>").append(this._$body);
};


/**
 * <p>
 * 根据传入的DOM元素, 解析传入的相关属性, 创建相应的区域
 * </p>
 * 
 * @function
 * @static
 * @param {DOM} elem 传入的DOM元素
 * @param {string} zxt.end 检查是否是最后一行
 * @return {zxt.ui.Rows} 创建的区域对象
 */
zxt.ui.Rows.parse = function(elem){
	var j = $(elem);
		
	var _instance = new zxt.ui.Rows();
	j.children().each( function( idx, dom )
		{
			var _end = $(dom).attr("zxt.end");
			if ( _end == "true" )
				_instance.addElement(dom, true);
			else
				_instance.addElement(dom, false);
		}
	);	
	
	return _instance;
};


zxt.defineClazz(zxt.ui.Rows, zxt.ui.Widget);

/**
 * <p>
 * 返回控件类型
 * </p>
 * 
 * @function
 * @returns {string} "zxt.ui.Rows"
 */
zxt.ui.Rows.prototype.getType = function(){
  return "zxt.ui.Rows";
};



/**
 * <p>
 * 渲染该区域的DOM节点
 * </p>
 * 
 * @function
 * @return {DOM} 渲染成的DOM节点
 */
zxt.ui.Rows.prototype.renderSelf = function(){
  return this._$table.get(0);
};


/**
 * <p>
 * 在原有行前面插入传入的DOM元素
 * </p>
 * 
 * @function
 * @static
 * @param {DOM} elem 传入的DOM元素
 */
zxt.ui.Rows.prototype.frontAppend = function (elem){
	var td = $("<td nowrap />").append(elem);
	var tr = $("<tr>").append(td);
	this._$tr.before(tr);
};


/**
 * <p>
 * 在原有行后面插入传入的DOM元素
 * </p>
 * 
 * @function
 * @static
 * @param {DOM} elem 传入的DOM元素
 */
zxt.ui.Rows.prototype.endAppend = function (elem){
	var td = $("<td nowrap />").append(elem);
	var tr = $("<tr>").append(td);
	this._$table.append(tr);
};	


/**
 * <p>
 * 插入传入的DOM元素
 * </p>
 * 
 * @function
 * @static
 * @param {DOM} elem 传入的DOM元素
 * @param {Boolean} end 是否在原有行后面插入
 */
zxt.ui.Rows.prototype.addElement = function (elem, end){
	if ( end ){
		this.endAppend(elem);
	} else {
		this.frontAppend(elem);
	}	
};	

/**
 * <p>
 * 能加载基本控件的工具栏类
 * </p>
 * 
 * @class 能加载基本控件的工具栏类
 *
 */
zxt.ui.Bar = function(){
	zxt.ui.Widget.call(this);
	
	this._$tail = $("<td/>").width("100%");
	this._$tr = $("<tr/>").append(this._$tail);	
	this._$body = $("<tbody/>").append(this._$tr);	
	this._$table = $("<table border=0 cellspacing=0 cellpadding=0 style='position: relative;'/>").append(this._$body);
	this._$table.addClass("por-Bar");
		
	this._last = null;
};



/**
 * <p>
 * 根据传入的DOM元素, 解析传入的相关属性, 创建相应的区域
 * </p>
 * 
 * @function
 * @static
 * @param {DOM} elem 传入的DOM元素
 * @param {string} zxt.front 是否从前加入默认为false
 * @return {zxt.ui.Bar} 创建的区域对象
 */
zxt.ui.Bar.parse = function(elem){
	var j = $(elem);
		
	var _instance = new zxt.ui.Bar();
	j.children().each( function( idx, dom )
		{
			var _front = $(dom).attr("zxt.front");
			if ( _front == "true" )
				_instance.addElement(dom, true);
			else
				_instance.addElement(dom, false);
		}
	);	
	
	return _instance;
};


zxt.defineClazz(zxt.ui.Bar, zxt.ui.Widget);

/**
 * <p>
 * 返回控件类型
 * </p>
 * 
 * @function
 * @returns {string} "zxt.ui.Bar"
 */
zxt.ui.Bar.prototype.getType = function(){
  return "zxt.ui.Bar";
};



/**
 * <p>
 * 渲染该区域的DOM节点
 * </p>
 * 
 * @function
 * @return {DOM} 渲染成的DOM节点
 */
zxt.ui.Bar.prototype.renderSelf = function(){
  return this._$table.get(0);
};


/**
 * <p>
 * 在原有控件前面插入传入的DOM元素
 * </p>
 * 
 * @function
 * @static
 * @param {DOM} elem 传入的DOM元素
 */
zxt.ui.Bar.prototype.frontAppend = function (elem){
	if(!this._front){
		var img = "<img src=\"" + zxt.cfg.IMAGES_PATH +"/efgrid_blue_divider.gif\">";
		var lastimg = $("<td nowrap />").html(img);
		this._$tail.before(lastimg);		
		this._front = lastimg;
	}
	
	var img = "<img src=\"" + zxt.cfg.IMAGES_PATH +"/efgrid_blue_divider.gif\">";
	var imgtd = $("<td nowrap />").html(img);	
	var td = $("<td nowrap />").append(elem);
	this._front.before(imgtd);
	this._front.before(td);
};


/**
 * <p>
 * 在原有控件后面插入传入的DOM元素
 * </p>
 * 
 * @function
 * @static
 * @param {DOM} elem 传入的DOM元素
 */
zxt.ui.Bar.prototype.endAppend = function (elem){
	if(!this._last){
		var img = "<img src=\"" + zxt.cfg.IMAGES_PATH +"/efgrid_blue_divider.gif\">";
		var lastimg = $("<td nowrap />").html(img);
		this._$tail.after(lastimg);		
		this._last = lastimg;
	}
	
	var img = "<img src=\"" + zxt.cfg.IMAGES_PATH +"/efgrid_blue_divider.gif\">";
	var imgtd = $("<td nowrap />").html(img);	
	var td = $("<td nowrap />").append(elem);
	this._last.before(imgtd);
	this._last.before(td);
};	


/**
 * <p>
 * 插入传入的DOM元素
 * </p>
 * 
 * @function
 * @static
 * @param {DOM} elem 传入的DOM元素
 * @param {Boolean} before 是否在原有控件前面插入
 */
zxt.ui.Bar.prototype.addElement = function (elem, before){
	if ( before ){
		this.frontAppend(elem);
	} else {
		this.endAppend(elem);
	}	
};	


/**
 * <p>
 * 能显示消息的消息栏类
 * </p>
 * 
 * @class 能显示消息的消息栏类
 *
 */
zxt.ui.MessageBar = function(autoHide){
	zxt.ui.Widget.call(this);
		
	this._autoHide = autoHide;
	if ( autoHide == undefined ){
		this._autoHide = false;
	}	
		
	this._$jqContainer = $("<div style='100%'>");
	this._$jqContainer.addClass("tableColumnHeadings").addClass("por-MessageBar");
	if ( this._autoHide ){
		this._$jqContainer.css("display","none");
	}	
};


/**
 * <p>
 * 根据传入的DOM元素, 解析传入的相关属性, 创建相应的区域
 * </p>
 * 
 * @function
 * @static
 * @param {DOM} elem 传入的DOM元素
 * @param {string} zxt.msg 设置要显示的信息
 * @return {zxt.ui.MessageBar} 创建的区域对象
 */
zxt.ui.MessageBar.parse = function(elem){
	var j = $(elem);		
	var _instance = new zxt.ui.MessageBar();
	
	var _msg = j.attr("zxt.msg");
	
	if ( zxt.util.isString(_msg) ){
		_instance.setMessage(_msg, false);
	};
	return _instance;
};


zxt.defineClazz(zxt.ui.MessageBar, zxt.ui.Widget);

/**
 * <p>
 * 返回控件类型
 * </p>
 * 
 * @function
 * @returns {string} "zxt.ui.MessageBar"
 */
zxt.ui.MessageBar.prototype.getType = function(){
  return "zxt.ui.MessageBar";
};



/**
 * <p>
 * 渲染该区域的DOM节点
 * </p>
 * 
 * @function
 * @return {DOM} 渲染成的DOM节点
 */
zxt.ui.MessageBar.prototype.renderSelf = function(){
  return this._$jqContainer.get(0);
};


/**
 * <p>
 * 设置消息内容
 * </p>
 * 
 * @function
 * @param {string} msg 设置要显示的信息
 * @param {Boolean} is_error 是否是错误
 */
zxt.ui.MessageBar.prototype.setMessage = function(msg, is_error){
	var d = new Date();
	this._$jqContainer.find("span").unbind();
	this._$jqContainer.html("["+d.toLocaleString()+"]--"+msg+"<span style='cursor:pointer;color:blue'>[清除消息]</span>").css("color","");
	if (!!is_error){
		this._$jqContainer.css("color","red");
	}
	var instance = this;
	this._$jqContainer.find("span").click(function(){
		instance.clearMessage();
	});
	
	if ( this._autoHide ){
		this._$jqContainer.css("display","block");
	}	
	
};


/**
 * <p>
 * 清空消息栏内容
 * </p>
 * 
 * @function
 */
zxt.ui.MessageBar.prototype.clearMessage = function(){
	this.setMessage("");
	if ( this._autoHide ){
		this._$jqContainer.css("display","none");
	}
};


/**
 * 进度条控件
 * 
 * @class 进度条控件控件类
 * @param {String} [imgUrl] 进度条图片url，默认为蓝色图片
 * @param {String} [height] 进度条高度，初始值为5
 * @param {String} [maxWidth] 进度条最大宽度，初始值为200
 */
zxt.ui.ProgressBar = function(imgUrl,height,maxWidth) {
	zxt.ui.Interactor.call(this);
	this._imgUrl = imgUrl||zxt.cfg.IMAGES_PATH + '/zxt_progressBar_blue.gif';
	this._height = height||5;
	this._maxWidth = maxWidth||200;
	this._$jqDom = $("<div nowrap>");
	this._$img = $("<img />");
	this.val(0);
	
};

/**
 * 根据传入的DOM元素, 解析传入的相关属性, 创建相应的进度条对象
 * 
 * @function
 * @static
 * @param {DOM} elem 解析的DOM元素
 * @return {zxt.ui.Choose} 根据传入的DOM元素创建的进度条对象
 */
zxt.ui.ProgressBar.parse = function(elem) {
	var j = $(elem);

	var _imgUrl = j.attr("zxt.imgUrl");
	var _height = j.attr("zxt.imgHeight");
	var _maxWidth = j.attr("zxt.maxWidth");
	
	var _instance = new zxt.ui.ProgressBar(_imgUrl,_height,_maxWidth);

	return _instance;
};


zxt.defineClazz(zxt.ui.ProgressBar, zxt.ui.Interactor);

/**
 * 返回控件类型
 * 
 * @function
 * @returns {string} "zxt.ui.ProgressBar"
 */
zxt.ui.ProgressBar.prototype.getType = function() {
	return "zxt.ui.ProgressBar";
};

/**
 * <p>
 * 渲染该进度条的DOM节点
 * </p>
 * 
 * @function
 * @returns {DOM} 渲染成的DOM节点
 */
zxt.ui.ProgressBar.prototype.renderSelf = function() {
	var instance = this;
	
	this._$jqDom.empty();
	
	this._$img.attr("src",instance._imgUrl);
	this.setValue(0);
	this._$img.css("height",instance._height);
	
	this._$jqDom.append(this._$img);
	return this._$jqDom.get(0);
};

/**
 * <p>
 * 设置进度条的百分率
 * </p>
 * 
 * @function
 * @param {float} value 进度条的百分率,例如0.8
 */
zxt.ui.ProgressBar.prototype.setValue = function(value){
	this.val(value);
	this._$img.css("width",this._maxWidth*value);
};


zxt.ui.ProgressBarFactory = function() {
};


zxt.defineClazz(zxt.ui.ProgressBarFactory, zxt.ui.InteractorFactory);

zxt.ui.ProgressBarFactory.prototype.getInstance = function() {
	return new zxt.ui.ProgressBar();
};




